<template>
  <header v-if="transparent" class="mui-bar mui-bar-transparent" data-top='0' data-offset='15' data-duration='16' data-scrollby=".mui-scroll-wrapper" style="backgourd-color:#de181b;">
    <div id="search" class="mui-input-row mui-search">
      <input type="search" class="mui-input-clear" placeholder="">
    </div>
  </header>
  
  <header v-else class="mui-bar mui-bar-nav">
    <a v-if="headback" class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
    <h1 class="mui-title">{{headfont}}</h1>
  </header>
</template>

<script>

import { userRedirect } from 'assets/js/Lib'
// let redirect = userRedirect.getRedirect()
// const old_back = mui.back
// mui.back = () => {
//   if (redirect.id) {
//     old_back()
//   } else {
//     window.toHome()
//   }
// }

export default {
  data() {
    return {

    }
  },
  components: {

  },
  props: {
    transparent: {
      type: Boolean,
      default: false
    },
    search: {
      type: Boolean,
      default: false
    },
    headback: {
      type: Boolean,
      default: true
    },
    headfont: {
      type: String,
      default: '导航'
    }
  },
  //实例初始化最之前，无法获取到data里的数据
  beforeCreate() {


  },
  //在挂载开始之前被调用
  beforeMount() {


  },
  //已成功挂载，相当ready()
  mounted() {
    mui('#search').input()
  },
  //相关操作事件
  methods: {

  }
}
</script>

<style lang="less">
#app {
  input[type=search] {
    background-color: #fff;
  }

  .mui-bar-transparent {
    background-color: rgba(222,24,27,.1);
  }
}
</style>
